<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :spacing="14"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="业务类型：" prop="businessTypeCode">
            <el-select
              v-model="queryParams.businessTypeCode"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in businessType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流程状态：" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in processData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/wf-relation/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
      @selection-change="handleSelectTable"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd"
          type="primary"
          plain
          style="background: #fff"
          size="mini"
          @click="handleArticulated"
          >挂接</el-button
        >
        <el-button
          class="tableAdd"
          type="primary"
          style="background: #fff"
          plain
          size="mini"
          @click="handleEnable"
          >启用</el-button
        >
      </template>
      <template #status="{ row }">
        <span
          :style="{
            color: row.status == 1 ? '#49CC6A' : 'rgba(0, 0, 0, 0.65)',
          }"
          >{{ statusType[row.status] }}</span
        >
      </template>
      <template #processDefName="{ row }">
        <span>{{ row.wfProcessDefinition.name }}</span>
      </template>
    </table-panel>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  addProcessArticulated,
  closeProcessArticulated,
  deleteProcessArticulated,
} from "@/api/approvalManage/processArticulated.js";
import { chownSync } from "fs";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
    QueryPanel,
  },
  data() {
    return {
      queryParams: {
        businessTypeCode: "",
        status: "",
      },
      processData: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "2",
          label: "停用",
        },
      ],
      businessType: [
        {
          label: "企业展示-图文展示",
          value: "COMPANYSHOW",
        },
        {
          label: "产品货架-图文展示",
          value: "PRODUCTSHOW",
        },
        {
          label: "产品货架-报价方案-上架",
          value: "QUOTEPROJECT-LISTING",
        },
        {
          label: "企业展示-资料管理-上架",
          value: "COMPANYSHOW-DOCUMENT-LISTING",
        },
        {
          label: "产品货架-资料管理-上架",
          value: "PRODUCTSHOW-DOCUMENT-LISTING",
        },
        {
          label: "个人空间-营销方案-上架",
          value: "MARKETING-PROGRAM-LISTING",
        },
        {
          label: "企业展示-资料管理-下架",
          value: "COMPANYSHOW-DOCUMENT-DELIST",
        },
        {
          label: "产品货架-资料管理-下架",
          value: "PRODUCTSHOW-DOCUMENT-DELIST",
        },
        {
          label: "产品货架-报价方案-下架",
          value: "QUOTEPROJECT-DELIST",
        },
        {
          label: "个人空间-营销方案-下架",
          value: "MARKETING-PROGRAM-DELIST",
        },
      ],
      statusType: { 1: "启用", 2: "停用" },
      operateArray: [
        {
          name: "启用",
          icon: "table-column-start",
        },
        {
          name: "停用",
          icon: "table-column-stop",
        },
        {
          name: "删除",
          icon: "table-column-delete",
        },
      ],
      columns: [
        {
          type: "checkout",
        },
        {
          field: "businessTypeName",
          label: "业务类型",
        },
        {
          field: "processDefName",
          label: "当前关联流程",
          slots: { default: "processDefName" },
        },
        {
          field: "status",
          label: "状态",
          slots: { default: "status" },
        },
        {
          field: "operateName",
          label: "操作人",
        },
        {
          field: "updateTime",
          type: "date",
          label: "操作时间",
        },
        {
          label: "操作",
          width: "300px",
        },
      ],
      selectData: [],
    };
  },

  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    handleArticulated() {
      this.$router.push("/approvalManage/articulated");
    },
    onOperate(type, row) {
      const url = {
        启用: addProcessArticulated,
        停用: closeProcessArticulated,
        删除: deleteProcessArticulated,
      };
      this.$confirm("确认" + type + "吗？").then(() => {
        url[type]({ ids: row.id }).then((res) => {
          this.$message.success("操作成功！");
          this.$refs.tablePanel.getTable();
        });
      });
    },
    // 批量启用
    handleEnable() {
      this.$confirm("确认批量启用流程吗？").then(() => {
        addProcessArticulated({ ids: this.selectData.join(",") }).then(
          (res) => {
            this.$message.success("操作成功！");
            this.$refs.tablePanel.getTable();
          }
        );
      });
    },
    // 表格选择框函数
    handleSelectTable(row) {
      this.selectData = row.map((item) => {
        return item.id;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tableAdd {
  width: 56px;
  height: 32px;
  border: 1px solid #971111;
  color: #971111 !important;
  padding: 0;
  text-align: center;
  line-height: 30px;
  &:focus {
    border-color: #971111;
  }
  &:hover {
    border-color: #971111;
  }
}
.cell {
  span {
    font-size: 16px;
    font-weight: 400;
  }
}
</style>
